<template>
    <div class="orderList">
        <h1>活动列表</h1>
        <el-button type="primary" @click="$router.push('/event/createEvent')">创建活动</el-button>
        <el-table
        max-height="600px"
      :data="tableData"
      style="width: 80%;margin:auto;">
      <!-- <el-table-column type="expand"> -->
        <!-- <template slot-scope="scope">
            <el-table 
     :data="scope.row.rooms"
      style="width: 80%;margin:auto;"
      > -->
      <!-- <el-table-column  
    prop="room_id" label="房间号" width="auto"
   ></el-table-column> -->
   <!-- <el-table-column  
    prop="sec_inventory" label="设置库存" width="auto"
   ></el-table-column> -->
    
    <!-- </el-table> -->
        <!-- </template> -->
   
    
    <!-- </el-table-column> -->
      <el-table-column
        prop="id"
        label="活动id"
        width="auto">
      </el-table-column>
      <el-table-column
        prop="event_name"
        label="活动名称"
        width="auto">
      </el-table-column>
      <el-table-column
      sortable
        prop="startTime"
        label="开始时间"
        width="auto"/>
        <el-table-column
        prop="endTime"
        sortable
        label="结束时间"
        width="auto"/>
        <el-table-column
        sortable
      fixed="right"
      label="状态"
      prop="status"
      width="auto">
      <template slot-scope="scope">
      <p>{{ statusConvert(scope.row.status)}}
      </p>
      </template>
      </el-table-column>
        <el-table-column
        
      fixed="right"
      label="启用"
      width="auto">
      <template slot-scope="scope">
        <el-switch
  v-model="scope.row.valid"
  :active-value=1
  :inactive-value=0
  @change="changeValid(scope.row)"
  
>
</el-switch>
        <!-- <el-button
          :disabled="isNotAble"
          @click="showRoomDetail(scope.row)"
          type="text"
          size="small">
          编辑
        </el-button>
        <el-button
          :disabled="isNotAble"
          @click="showRoomDetail(scope.row)"
          type="text"
          size="small">
          删除
        </el-button> -->
      </template>
    </el-table-column>
        <!-- <el-table-column
        prop="event_name"
        label="活动名称"
        width="auto"> -->
      <!-- <el-table-column
        prop="参与房间"
        label="房间号"> -->
    <!-- <template slot="header">
        <span style="margin:5px">房间号</span>
        <el-tooltip class="item" effect="dark" content="点击房间号查看房间详情" placement="right">
            <el-icon class="el-icon-info"></el-icon>
        </el-tooltip>
        
    </template>
     <template slot-scope="scope">
      

      <el-button  type="text"  @click="showRoomDetail(scope.row)">{{scope.row.room_id}}</el-button>
 
     -->
 
    
     <!-- </template> -->
      
      <!-- </el-table-column> -->
    </el-table>

    <!-- <RoomDetail :visible.sync="popupVisible" :captcha-visible="false" :room="this.chosenRoom"  @close="closePopup" /> -->

    </div>

  </template>

  <script>
// import  {getOrderByUID} from '@/api/order.js'
import  {getAllEvent} from '@/api/event.js'
// import RoomDetail from '@/views/RoomDetail.vue'
    export default {
        components:{
            // RoomDetail
        },
      data() {
        return {
          tableData: [],
          popupVisible: false,
       
         chosenRoom:{},
          
        }},
        mounted(){
            this.do_getAllEvent();
        },
        methods:{
            do_getAllEvent(){
                getAllEvent().then(res=>{
                    if(res.code==200){
                    this.tableData=res.data;
                    }
                else this.$message.error(res.message)
                
                })},


                
                statusConvert(value){
            if(value===0)
                return "未开始";
            if(value===1) 
                return "进行中"
            else return "已结束"
        },

      changeValid(row){
      var change="";
      switch(row.valid){
        case 1:
          change="启用";
          break;
        default:
          change="禁用"
      }
       this.$confirm('确定'+change+'活动吗？', '提示').then(() => {
      // alert(1)
    }).catch(() => {});
  },

    }
      }


        
    // closePopup() {
    //   this.popupVisible = false;
    // },
    //         showRoomDetail(room){
    //             this.popupVisible = true;
                
    //             getRoomByRoomID(room.room_id).then(resp=>{
                    
    //                 this.chosenRoom=resp.data;
                   
    //             })
                
    //         }}

            
          
           
               
                    // alert("id:"+room.room_id)
                  
                  
            
        // }
      
  </script>

  <style>
.orderList{
    justify-content: center;
}
</style>